<template>
  <div class="container">
    <div class="brand-box">
      <p class="title">{{ aboutBrandData.title }}</p>
      <div class="brand-text" v-html="aboutBrandData.content"></div>
      <div class="image-box">
        <img :src="aboutBrandData.thumb" alt="" class="image" />
      </div>
    </div>
    <div class="event-box">
      <p class="title">{{ $t("品牌大事记") }}</p>
      <div class="event-time">
        <div
          class="items"
          :class="'event' + (index + 1)"
          v-for="(item, index) in aboutEventData"
          :key="item.id"
          v-show="index < 5"
        >
          <p
            class="info animated"
            :class="currentIndex == index ? 'indfo_select bounce' : ''"
          >
            {{ item.title }}
          </p>
          <img
            :src="
              currentIndex == index
                ? require('~/assets/images/xuanzhon.png')
                : require('~/assets/images/yuanx.png')
            "
            alt=""
            @mouseenter="currentIndex = index"
          />
          <p
            class="time"
            :style="{ color: currentIndex == index ? '#2ca2f1' : '' }"
          >
            {{ item.date_line }}
          </p>
        </div>
      </div>
    </div>
    <div class="event-box-mobile">
      <p class="title">{{ $t("品牌大事记") }}</p>
      <div class="swiper" v-swiper:DateLineSwiper="SwiperDateLineOption">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in aboutEventData"
            :key="index"
          >
            <div class="circular"></div>
            <p class="time">{{ item.date_line }}</p>
          </div>
        </div>
      </div>
      <div class="title-swiper" v-swiper:TitleSwiper="SwiperTitleOption">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide swiper-no-swiping"
            v-for="(item, index) in aboutEventData"
            :key="index"
          >
            <p class="title">{{ item.title }}</p>
          </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    aboutBrandData: {
      type: Object,
    },
    aboutEventData: {
      type: Array,
    },
  },
  data() {
    let that = this;
    return {
      SwiperDateLineOption: {
        loop: false,
        autoplay: false,
        slidesPerView: 5,
        centeredSlides: true,
        spaceBetween: 0,
        speed: 800,
      },
      SwiperTitleOption: {
        loop: false,
        autoplay: false,
        slidesPerView: 1,
        spaceBetween: 0,
        noSwiping: true,
        speed: 800,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        controller: {
          control: that.DateLineSwiper,
        },
      },
      currentIndex: 2,
    };
  },
  mounted() {
    this.DateLineSwiper.controller.control = this.TitleSwiper; //Swiper1控制Swiper2，需要在Swiper2初始化后
    this.TitleSwiper.controller.control = this.DateLineSwiper; //Swiper2控制Swiper1，需要在Swiper1初始化后
    // console.log(this.aboutEventData);
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 100rem 0rem 150rem 0rem;

  .title {
    font-size: 54rem;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
    text-align: center;
    margin: 0;
  }

  .brand-box {
    display: flex;
    flex-direction: column;
    padding: 0 100rem;
    .brand-text {
      margin-top: 100rem;
      font-size: 20rem;
      font-family: Source Han Sans CN;
      font-weight: 300;
      color: #333333;
      line-height: 36rem;
      white-space: pre-wrap;
    }
    .image-box {
      width: 100%;
      overflow: hidden;
      margin-top: 51rem;
      border-radius: 20rem;
      &:hover {
        .image {
          transform: scale(1.2);
        }
      }
      .image {
        width: 100%;
        transition: 0.6s;
      }
    }
  }
  .event-box {
    display: block;
    margin-top: 154rem;
    .event-time {
      width: 100%;
      height: 423rem;
      background: url("~/assets/images/ditu.png") no-repeat;
      background-size: 100% 100%;
      margin-top: 158rem;
      position: relative;

      .items {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 320rem;

        .info {
          width: 334rem;
          font-size: 16rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
          line-height: 30rem;
          text-align: center;
          height: 100rem;
          transition: 0.3s;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 25rem 0;
          box-sizing: border-box;
          padding: 15rem;
        }
        img {
          width: 30rem;
          height: 30rem;
          cursor: pointer;
          transition: 0.3s;
        }
        .time {
          font-size: 24rem;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          margin: 0;
        }
      }
      .indfo_select {
        background: #ffffff;
        box-shadow: 0rem 10rem 30rem 0rem rgba(230, 230, 230, 0.6);
        border-radius: 10rem;
      }
      .event1 {
        position: absolute;
        top: -22rem;
        left: 100rem;
      }
      .event2 {
        position: absolute;
        top: -20rem;
        left: 462rem;
        flex-direction: column-reverse;
      }
      .event3 {
        position: absolute;
        top: -166rem;
        left: 800rem;
      }
      .event4 {
        position: absolute;
        top: -22rem;
        right: 466rem;
        flex-direction: column-reverse;
      }
      .event5 {
        position: absolute;
        top: -18rem;
        right: 100rem;
      }
    }
  }
  .event-box-mobile {
    display: none;
  }
}
@media (max-width: 900px) {
  .container {
    padding: 25px 0 0 0;

    .title {
      font-size: 19px;
    }

    .brand-box {
      .brand-text {
        margin-top: 0;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #333333;
        line-height: 24px;
      }
      .image-box {
        height: 191px;
        .image {
          height: 100%;
        }
      }
    }
    .event-box {
      display: none;
    }
    .event-box-mobile {
      display: block;
      padding: 20px 0;
      margin-top: 20px;
      background: linear-gradient(133deg, #fdfaff 0%, #f8f8ff 100%);

      .swiper {
        width: 100%;
        margin-top: 20px;

        .swiper-slide {
          width: 28px;
          display: flex;
          flex-direction: column;
          align-items: center;
          &::before {
            content: " ";
            position: absolute;
            border-top: 1px dotted #909fff;
            width: 80%;
            left: 70%;
            top: 10px;
          }
          &:last-child {
            &::before {
              display: none;
            }
          }
          .circular {
            width: 20px;
            margin: 0 auto;
            height: 20px;
            background-color: #d6dcff;
            border-radius: 100%;
            position: relative;

            &::after {
              content: " ";
              width: 60%;
              height: 60%;
              background-color: #4660ff;
              border-radius: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
          .time {
            font-size: 16px;
            color: #121212;
            margin: 0;
          }
        }
        .swiper-slide-active {
          .circular {
            &::after {
              background-color: #d7a1ff;
            }
          }
        }
      }
      .title-swiper {
        width: 100%;
        margin-top: 20px;
        padding-bottom: 40px;

        .swiper-slide {
          width: 100%;
          padding: 0 60px;
          box-sizing: border-box;
          .title {
            background: linear-gradient(141deg, #d7a1ff 0%, #4660ff 100%);
            -webkit-background-clip: text;
            font-weight: 700;
            -webkit-text-fill-color: transparent;
            color: transparent;
            font-size: 15px;
            line-height: 1.4;
            display: inline-block;
            margin: 0;
          }
        }
        .swiper-button-prev,
        .swiper-button-next {
          width: 24px;
          height: 24px;
          border: 1px solid;
          border-radius: 100%;
          color: #252b3a;
          &::after {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
